import {
  primaryBackgroundColor,
  secondaryBorderColor,
  primaryHeaderBackgroundColor,
  primaryColor2,
} from '../../theme/default';
import React from 'react';
import {TouchableOpacity, View, Text} from 'react-native';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {useNavigation, NavigationProp} from '@react-navigation/native';

import ArrowDown from '../../assets/icons/arrow_down.svg';
import CardIcon from '../../assets/icons/card.svg';
import NoticeIcon from '../../assets/icons/notice.svg';
import ScanIcon from '../../assets/icons/scan.svg';
import {useAccount} from '../../hooks/useAccount';
import {useSwitchWalletModalProvider} from '../../hooks/useSwitchWalletModalProvider';
import TabBar from '../UI/TabBar/TabBar';
import Mining from '../Views/Mining';
import My from '../Views/My';
import Wallet from '../Views/Wallet';
import {BottomTabParamList, RootStackParamList} from './routes';

const Tab = createBottomTabNavigator<BottomTabParamList>();

type RootStackNavigationProp = NavigationProp<RootStackParamList>;

function BottomTabs() {
  const {userInfo} = useAccount();
  const navigation = useNavigation<RootStackNavigationProp>();
  const {toggleModal} = useSwitchWalletModalProvider();

  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        tabBarStyle: {
          backgroundColor: 'transparent',
        },
      }}
      tabBar={props => <TabBar {...props} />}>
      <Tab.Screen
        name="Home"
        options={{
          tabBarLabel: 'Home',
          headerTitle: '',
          headerLeft: () => (
            <TouchableOpacity
              onPress={() => {
                toggleModal();
              }}
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                marginLeft: 12,
                backgroundColor: primaryBackgroundColor,
                padding: 8,
                borderRadius: 16,
              }}>
              <View
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'row',
                }}>
                <Text style={{color: '#AAA', fontSize: 14, fontWeight: '600'}}>
                  {userInfo?.displayName}
                </Text>
                <ArrowDown color="#AAA" width={24} height={24} />
              </View>
            </TouchableOpacity>
          ),
          headerRight: () => (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'flex-end',
                marginRight: 12,
              }}>
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate('Scanner');
                }}
                style={{
                  backgroundColor: secondaryBorderColor,
                  borderRadius: 24,
                  padding: 6,
                  alignItems: 'center',
                  marginRight: 12,
                }}
                activeOpacity={0.5}>
                <ScanIcon width={24} height={24} color="#AAA" />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate('CardList');
                }}
                style={{
                  backgroundColor: secondaryBorderColor,
                  borderRadius: 24,
                  padding: 6,
                  alignItems: 'center',
                  marginRight: 12,
                }}
                activeOpacity={0.5}>
                <CardIcon width={24} height={24} color="#AAA" />
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  backgroundColor: secondaryBorderColor,
                  borderRadius: 24,
                  padding: 6,
                  alignItems: 'center',
                }}
                activeOpacity={0.5}
                onPress={() => {
                  navigation.navigate('Notification');
                }}>
                <NoticeIcon width={24} height={24} color="#AAA" />
              </TouchableOpacity>
            </View>
          ),
          headerStyle: {
            backgroundColor: primaryHeaderBackgroundColor,
            height: 110,
          },
        }}
        component={Wallet}
      />
      <Tab.Screen
        name="Mining"
        component={Mining}
        options={{
          tabBarLabel: 'Mining',
          headerTitleStyle: {
            color: primaryColor2,
          },
          headerStyle: {
            backgroundColor: primaryHeaderBackgroundColor,
          },
        }}
      />
      <Tab.Screen
        name="My"
        component={My}
        options={{
          tabBarLabel: 'My',
          headerTitleStyle: {
            color: primaryColor2,
          },
          headerStyle: {
            backgroundColor: primaryHeaderBackgroundColor,
          },
        }}
      />
    </Tab.Navigator>
  );
}

export default BottomTabs;
